@use 'sass:map';
@use '../../../../scss/gio-layout' as gio-layout;
@use '@angular/material' as mat;
@use '@gravitee/ui-particles-angular' as gio;

:host {
  @include gio-layout.gio-responsive-content-container;
}

.subscription {
  display: flex;
  flex-direction: column;
  gap: 24px;

  &__footer {
    display: flex;
    padding-top: 16px;
    gap: 8px;
  }
  &__api-keys {
    &__subtitle {
      padding-bottom: 24px;
    }

    &__actions {
      display: flex;
      justify-content: flex-end;
    }

    &__footer {
      display: flex;
      padding-top: 24px;
      gap: 8px;
    }

    &__table-wrapper {
      margin-top: 8px;
      .apiKeyCell {
        width: 100%;
      }

      .activeIcon {
        color: mat.get-color-from-palette(gio.$mat-success-palette, darker20);
      }

      .revokedIcon {
        color: mat.get-color-from-palette(gio.$mat-error-palette, default);
      }
    }
  }
}
